import React, { useEffect, useState } from 'react';
import BulletScreen, { StyledBullet } from 'rc-bullets';

const token=localStorage.getItem('token');
const headImage=localStorage.getItem('userImage');
const headUrl= token ? headImage:'https://www.prebeauty.work/images/111.jpg';
const data=['1111','222222']

export default function Demo() {
  // 弹幕屏幕
  const [screen, setScreen] = useState(null);
  // 弹幕内容
  const [bullet, setBullet] = useState('');
  useEffect(() => {
    // 给页面中某个元素初始化弹幕屏幕，一般为一个大区块。此处的配置项全局生效
    let s = new BulletScreen('.screen',{duration:15});
    // or
    // let s=new BulletScreen(document.querySelector('.screen));
    setScreen(s);
  }, []);
  // 弹幕内容输入事件处理
  const handleChange = ({ target: { value } }) => {
    setBullet(value);
  };
  const load = () => {
    data.map((data)=>{
      screen.show(
        <StyledBullet
          head={headUrl}
          msg={data}
          size='small'
          fontSize='20px'
          backgroundColor={'rgba('+ Math.floor(Math.random()*100) +','+ Math.floor(Math.random()*100) +','+ Math.floor(Math.random()*100) +',0.8)'}
        />
      );
    })
  }
  // 发送弹幕
  const handleSend = () => {
    if (bullet) {
      // push 纯文本
      // screen.push(bullet);
      // or 使用 StyledBullet

      screen.push(
        <StyledBullet
          head={headUrl}
          msg={bullet}
          size='0.5em'
          borderColor={'rgba('+ Math.floor(Math.random(0.5,1)*255) +','+ Math.floor(Math.random(0.5,1)*255) +','+ Math.floor(Math.random(0.5,1)*255) +',0.8)'}
        />
      );
      // or 还可以这样使用，效果等同使用 StyledBullet 组件
      screen.push({msg:bullet,head:headUrl,color:"gray",size:"0.5em",borderColor:"rgba(2,2,2,.3)"})
    }
  };
  return (
    <main style={{width:'100%',height:'100%',overflow:'hidden',padding:'5px 2px'}}>
      <div className="screen" style={{ width: '100%', height: '200px'}}>
        <div style={{textAlign:'center',lineHeight:'200px',color:'rgba(231, 133, 133, 0.8)',fontSize:'40px',fontWeight:500}}>向Ta表白</div>
      </div>
      <input value={bullet} onChange={handleChange} style={{width:'80%',height:'25px',margin:'5px 5px',border:'1px solid gray',borderRadius:'10px'}}/>
      <button onClick={handleSend} style={{width:'13%',height:'30px',margin:'5px 5px',border:'1px solid gray',borderRadius:'10px'}}>发送</button>
    </main>
  );
}